import React, { memo, useState } from "react";
import { Input, View, Text } from "@tarojs/components";
import { MyIcon } from "@/components"
import Taro from '@tarojs/taro';

import {
  Button,

} from '@antmjs/vantui'


import './index.scss'

const HomeSearch = () => {

  const [current, setCurrent] = useState(0)
  const [inpPlaceholder, setInpPlaceholder] = useState('输入私募公司名称')
  const [inputValue, setInputValue] = useState('')
  const navTitle = [
    {
      title: '私募',
      currenetTile: '查私募'
    },
    {
      title: '基金',
      currenetTile: '查基金'
    },
    {
      title: '从业人员',
      currenetTile: '查从业人员'
    }
  ]
  const changeBar = (index) => {
    setCurrent(index)
    setInputValue('')
    switch (index) {
      case 0:
        setInpPlaceholder("输入私募公司名称")
        break
      case 1:
        setInpPlaceholder("输入基金名称")
        break
      case 2:
        setInpPlaceholder("输入从业人员姓名")
        break
    }
  }
  const goDetail = () => {
    inputValue &&
      Taro.navigateTo({
        url: '/homeDetail/searchDetail/index?type=' + `${current}&value=${inputValue}`
      })
  }
  return (
    <View className='home_search'>
      <View className='nav-bar'>
        {
          navTitle.map((item, index) => {
            return (
              <>
                {
                  current == index ?

                    <View>
                      {
                        current == 0 ?
                          <View className='nav-left ' ><Text className='text3 black'>{item.currenetTile}</Text></View>
                          :
                          (current == 1 ?
                            <View className='nav-center' ><Text className='text3 black'>{item.currenetTile}</Text></View>
                            :
                            <View className='nav-right'><Text className='text3 black'>{item.currenetTile}</Text> </View>
                          )

                      }
                    </View>

                    :
                    <View className='white text2 gry1' onTap={() => changeBar(index)}>{item.title}</View>

                }
              </>

            )
          })
        }
      </View>
      <View className='search-center'>
        <Input type='text' placeholder={inpPlaceholder} value={inputValue} onInput={(e) => setInputValue(e.detail.value)}
          style={{ borderBottom: `${!inputValue ? '1px solid #B1B9C4' : ''}` }}
        />
        <Button type='default' onTap={() => goDetail()}>搜索</Button>
        <View className='footer'>
          <MyIcon iconName='icon-aite-ic' /> <Text style={{ marginLeft: '5px' }}>你想了解的，嗖一下就知道</Text>
        </View>
      </View>
    </View>
  );
};

export default memo(HomeSearch);
